<template>
  <div class="box">
    <el-calendar>
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div :class="data.isSelected ? 'is-selected' : ''">
          <!--每个月的日期格式-->
          <div>{{ data.day.split('-').slice(2).join('-') }}</div>
          <!--阳历与阴历的节日-->
          <div v-if="lunarData(data.day).festival" class="calendar-red">{{ lunarData(data.day).festival }}</div>
          <!--24节气-->
          <div v-else-if="lunarData(data.day).Term" class="calendar-red">{{ lunarData(data.day).Term }}</div>
          <!--每个月的初一当天显示当前月-->
          <div v-else-if="lunarData(data.day).IDayCn === '初一'">{{ lunarData(data.day).IMonthCn }}</div>
          <div v-else>{{ lunarData(data.day).IDayCn }}</div>
          <!--当前日期的事件显示-->
          <div v-for="(item, index) in calendarData" :key="index">
            <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0]) !== -1">
              <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-')) !== -1">
                <el-tooltip effect="light" :content="item.things" placement="top">
                  <div>{{ item.things }}</div>
                </el-tooltip>
              </div>
              <div v-else></div>
            </div>
            <div v-else></div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { calendar } from '@u/tool/calendar'

export default {
  name: 'Calendar',
  data() {
    return {
      calendarData: [
        { months: ['03', '04'], days: ['15'], things: '看电影' },
        { months: ['02', '05'], days: ['02'], things: '去公园野炊' }
      ]
    }
  },
  methods: {
    // 显示农历数据
    lunarData(solarDate) {
      const [year, month, day] = solarDate.split('-')
      return calendar.solar2lunar(year, month, day)
    }
  }
}
</script>

<style scoped>
/*当天的背景色，高亮*/
/deep/ .el-calendar-table td.is-today {
  background-color: #F2F8FE;
}

.calendar-red {
  color: #f56c6c;
}
</style>
